<template>
  <view class="service-images">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 轮播图 -->
    <swiper
      v-else
      class="service-images__swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      indicator-active-color="#07c160"
      indicator-color="rgba(255, 255, 255, 0.5)"
      circular
    >
      <swiper-item v-for="(image, index) in images" :key="index" class="swiper-item">
        <image :src="image" mode="aspectFill" class="service-images__image" @click="previewImage(index)" />
      </swiper-item>
    </swiper>
    
    <!-- 图片下面的圆角遮罩 -->
    <view class="curve-mask"></view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  /**
   * 图片数组
   */
  images: {
    type: Array,
    default: () => []
  },
  /**
   * 是否加载中
   */
  loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['click']);

/**
 * 预览图片
 * @param {Number} index - 当前图片索引
 */
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: props.images,
    indicator: 'number',
    loop: true
  });
  emit('click', index);
};
</script>

<style lang="scss" scoped>
.service-images {
  position: relative;
  width: 100%;
  height: 450rpx;

  &__swiper {
    width: 100%;
    height: 450rpx;
  }

  &__image {
    width: 100%;
    height: 100%;
  }
}

.swiper-item {
  width: 100%;
  height: 100%;
}

.curve-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30rpx;
  background-color: #f8f8f8;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 1;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 450rpx;
  background-color: #f5f5f5;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #07c160;
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  color: #888;
}
</style>
